.screen {
  width: 100%;
  height: 100%;
  background: url('~@/assets/screen/bg.png') no-repeat;
  background-size: 100% 100%;
  header {
    width: 100%;
    padding: 30px 30px 0;
    @include flex(space-between, center);
    position: relative;
    .header-left {
      @include flex(flex-start, center);
      img {
        cursor: pointer;
      }
      p {
        color: #fff;
        margin-left: 15px;
      }
    }
    .header-center {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      p {
        position: absolute;
        left: 50%;
        top: 32%;
        transform: translate(-50%, -50%);
        font-weight: bold;
        font-size: 36px;
        color: #FFFFFF;
        background: linear-gradient(0deg, #439CCA 0%, #FFFFFF 78.5888671875%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .el-container {
    margin-top: 30px;
    padding: 0 60px;
    .detection {
      max-height: 180px;
      overflow: hidden;
      padding: 0 10px;
      .detection-item {
        font-size: $font_16;
        color: #fff;
        margin-top: 20px;
        .flex {
          @include flex(space-between, center);
          .detection-item-index {
            width: 52px;
            height: 24px;
            line-height: 24px;
            background: #25B2C2;
            border-radius: 6px;
            text-align: center;
          }
          .flex-center {
            display: flex;
          }
        }
        .el-progress {
          margin-top: 10px;
          /deep/.el-progress-bar__outer {
            background-color: rgba(37,178,194, .25);
          }
        }
        .mg-l-20 {
          margin-left: 20px;
        }
        .mg-r-30 {
          margin-right: 30px;
        }
      }
    }
    .product {
      padding: 0 10px;
      max-height: 260px;
      overflow: hidden;
      .product-item {
        padding-bottom: 18px;
        margin-top: 24px;
        &:nth-child(-n+3) {
          .product-item-index {
            background: url('~@/assets/screen/index_active.png') no-repeat;
          }
        }
        .product-item-index {
          width: 33px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #FFFCF6;
          font-size: $font_14;
          background: url('~@/assets/screen/index.png') no-repeat;
        }
        p {
          color: #fff;
        }
        .product-item-name {
          margin: 0 50px 0 14px;
          font-size: $font_14;
        }
        @include flex(space-between, center);
        border-bottom: 1px solid rgba(52,59,78, .1);
        .el-progress {
          flex: 1;
          /deep/.el-progress-bar__inner {
            background-image: linear-gradient(90deg, #E2A234 0%, #37DBFB 100%);
          }
          &.small {
            /deep/.el-progress-bar__inner {
              background-image: linear-gradient(90deg, #0453B0 0%, #35D5F8 100%);
            }
          }
          /deep/.el-progress-bar__outer {
            background-color: #132037;
          }
        }
      }
    }
    .el-main {
      padding: 0;
    }
    .order-list-item {
      @include flex(space-between, center);
      font-size: $font_16;
      color: #FEFEFE;
      height: 40px;
      background: rgba(44,255,243,.1);
      .oli-index {
        width: 100px;
        @include flex(center, center);
        img {
          margin-right: 4px;
        }
        &.special {
          color: #06FDB6;
        }
      }
      .oli-user {
        width: 150px;
      }
      .oli-gys {
        width: 120px;
      }
      .oli-total {
        flex: 1;
      }
    }
    .order-list {
      height: 160px;
      overflow: hidden;
    }
    .supplier {
      height: 200px;
      overflow: hidden;
      margin-top: 20px;
      .supplier-item {
        @include flex(space-between, center);
        height: 40px;
        border-radius: 20px;
        background: rgba(44,255,243,.1);
        margin-top: 10px;
        font-size: $font_14;
        color: #fff;
        padding-right: 20px;
        &:first-child {
          .supplier-item-index {
            background-color: #ED5F51;
          }
        }
        &:nth-child(2) {
          .supplier-item-index {
            background-color: #EAAC4F;
          }
        }
        &:nth-child(3) {
          .supplier-item-index {
            background-color: #52CD8F;
          }
        }
        &:nth-child(n+4) {
          .supplier-item-index {
            background-color: #1F9BA1;
          }
        }
        .flex {
          @include flex(flex-start, center);
          .supplier-item-index {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            text-align: center;
            margin-right: 10px;
          }
        }
      }
    }
    #barChart {
      width: 100%;
      height: 200px;
    }
    #lineChart {
      width: 100%;
      height: 200px;
      padding: 0 10px;
    }
  }
  .mg-t-30 {
    margin-top: 30px;
  }
  .mg-l-30 {
    margin-left: 30px;
    font-size: 15px;
  }
}